<template>
  <div>
      <div class="box">
        <div class="zc user"><input type="text" placeholder="账号"></div>
        <div class="zc pw"><input type="text" placeholder="密码"></div>
        <div class="zc pw"><input type="text" placeholder="重新输入密码"></div>
        <div class="zc">
          <input type="text" placeholder="请输入验证码" class="sryzm">
          <span class="yzm">4512</span>
        </div>
        <button>注册</button>  
      </div>
      
  </div>
</template>
<script>
// import $ from 'jquery';
export default {
  name: "RegisterInput",
  data() {
    return{
      
    }
  }
//  methods: {
//     registerHandler(){
//       this.$router.push({path:"/login"})
//     }
//   }
}
</script>
// <script type="text/javascript">
//   $(function(){
//       $('.user').click(function(){
//           $(this).toggleClass('checked');
//           // $('checked2').toggleClass('.pw');
//       });
      
//   });
//   $(function(){
//     $('.pw').click(function(){
//       $(this).toggleClass('checked2');
//       // $('checked1').toggleClass('.user');
//     });
//   });
// </script>
<style scoped>
.box{
  float:left;
  padding: 10%; 
  font-size: 16px;
  color: #ABABAB;
}
  .zc{ 
    width:90%;
    height:60px;
    cursor: pointer;
    float:left;
    justify-content:center;
    align-items:Center;
    display: flex;
    
  }
  .zc>input {
    border-bottom: 1px solid gray;
    width:100%;
    height:25px;
    margin-left: 30px;
  }
  .user{ 
    background: url(../assets/img/user1.png) no-repeat; 
    background-size: 10%;
    background-position: 0 16px;
  }
  .pw{ 
    background: url(../assets/img/password1.png) no-repeat; 
    background-size: 10%;
    background-position: 0 16px;
  }

    .sryzm{
      float: left;
      margin-left: 30px;
    }
    .yzm{
      float: left;
      display: block;
      width:120px;
      height:30px;
      line-height: 30px;
      background-color: #FF406F;
      color: white;
      font-size: 20px;
      text-align: center;
      margin-left: 20px;
    }
    button {
      margin: 0;
      padding: 0;
      border: 1px solid transparent; 
      outline: none;   
      float:left;
      display: block;
      width:100%;
      height:50px;
      background-color: #FF406F;
      color: white;
      border-radius: 1em;
      margin-top:100px;
      box-shadow: 0 10px 50px -3px #FF406F;
    }
</style>